:root {
    color-scheme: light dark;
    font-family: munro !important;
    letter-spacing: 1px;
    color: white !important;
    scrollbar-color: transparent;
    scrollbar-arrow-color: transparent;
    --scrollbar-color-thumb: white;
    --scrollbar-color-track: transparent;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
    font-weight: bolder;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000 !important;   /* Bottom-right shadow */
    
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    :root {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    :root::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    :root::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    :root::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

a{
    color: white !important;
    text-decoration: none;
}

a:hover{
    color: yellow !important;
}

.UIbox {
    font-size: 1vw !important;
    background-color: rgba(144, 255, 255, 0.5) !important;
    background-image: linear-gradient(0deg, rgba(101, 155, 234, 0.5) 0%, rgba(144, 255, 255, 0.5) 100%), 
                      url('../Pattern.png');
    background-position: left top, left bottom;
    background-repeat: no-repeat, repeat-x;
    border: 0.5vw solid rgb(25, 178, 255) !important;
    border-radius: 4px;
    box-shadow: -0.125vw 0.125vw 0.125vw 0.125vw rgba(0, 0, 0, 0.75),
                inset -1px 1px 2px 2px rgb(0, 140, 210);
    font-family: munro !important;
    outline: none;
    padding: 4px;
    color: white !important;
    font-weight: bolder;
    cursor: default;
    overflow-y: scroll;
}

.button {
    font-size: 1vw !important;
    background-color: rgba(144, 255, 255, 0.5) !important;
    background-image: linear-gradient(0deg, rgba(29, 180, 255, 0.75) 0%, rgba(102, 204, 255, 0.75) 49.5%, rgba(102, 220, 255, 0.75) 50%, rgba(227, 249, 255, 0.75) 100%);
    background-position: left top, left bottom;
    background-repeat: no-repeat, repeat-x;
    border: 0.5vw solid rgb(25, 178, 255) !important;
    border-radius: 32px;
    box-shadow: -0.125vw 0.125vw 0.125vw 0.125vw rgba(0, 0, 0, 0.75);
    font-family: munro !important;
    outline: none;
    padding: 4px;
    color: white !important;
    font-weight: bolder;
    cursor: pointer;
    overflow-y: scroll;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000 !important;   /* Bottom-right shadow */
}

.text-container {
    font-size: 1vw !important;
    padding: 4px;
    color: white !important;
    font-weight: bolder;
    cursor: default;
}

.button:hover{
    background-color: rgba(0, 0, 0, 0.75);
    border: 3px solid rgb(219, 255, 255);
    transform: scale(1.05);
}

.dialogue {
    padding: 8px;
    font-size: 1.5vw !important;
}

.hidden{
    display: none !important;
}

.block{
    display: block !important;
}

.noscroll {
    overflow: hidden !important;
}

.mobilecontrol {
    font-size: 3vw !important;
}

.healthicon{
    width: 4vw;
    height: 4vw;
    display: inline-table;
}

.manaicon{
    width: 4vw;
    height: auto;
    display: inline-table;
}

.mana{
    color: white !important;
    font-size: 2vw;
    vertical-align: middle;
    height: 4vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.manatext{
    padding-left: 1vw;
}

.inventoryitem{
    display: block;
    margin: 0.5vw;
    cursor: pointer;
    transition: transform 0.1 ease-in-out;
}

.craftitem{
    display: block;
    margin: 0.5vw;
    cursor: pointer;
    transition: transform 0.1 ease-in-out;
}

.inventoryitem:hover{
    color: yellow !important;
}

.craftitem:hover{
    color: yellow !important;
}

.selected{
    color: yellow !important;
}

.highlighted{
    color: yellow;
}

.selectedhotbar{
    border: 0.5vw solid white !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    background-image: linear-gradient(0deg, rgba(255, 155, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%), 
                      url('../Pattern.png');
    background-position: left top, left bottom !important;
    background-repeat: no-repeat, repeat-x;
}

.credit{
    margin: 3%;
}

.CreditsTitle{
    font-size: 2vw;
    margin: 1%;
}

.creditheader{
    font-size: 1.5vw;
}

.creditname{
    font-size: 1vw;
}

#DebugDisplay {
    width: 15%;
    height: 50%;
    top: 0%;
    left: 0%;
    position: absolute;
    margin: 8px;
}

#DebugInventory {
    width: 15%;
    height: 30%;
    top: 15%;
    right: 0%;
    position: absolute;
    margin: 8px;
}

#MinigameBG {
    overflow: hidden !important;
}

#InventoryHeader {
    text-align: center;
    width: 100%;
    display: block;
}

#InventoryList {
    overflow-y: scroll;
    height: 85%;
    padding: 0.25vw;
}